<template>
  <Echart height="200px" :options="option" />
</template>

<script>
import Echart from '@/components/Echart/index'
export default {
  name: 'TaskStatusEchart',
  components: { Echart },
  data() {
    return {
      option: {
        legend: {
          bottom: '5%',
          left: 'center',
          data: ['停用', '启用']
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '一般',
            type: 'pie',
            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: true,
            tooltip: {},
            radius: ['70%', '90%'],
            center: ['50%', '60%'],
            labelLine: {
              normal: {
                show: true
              }
            },
            label: {
              normal: {
                show: true,
                formatter: function(obj) {
                  return obj.name ? obj.name + '\n' + obj.value : ''
                }
              }
            },
            data: [
              {
                value: 2,
                itemStyle: {
                  normal: {
                    color: 'rgba(80,150,224,0)'
                  }
                }
              },
              {
                name: '停用',
                value: 1, // 渐变色部分
                itemStyle: {
                  color: '#FF7D7D'
                  /* color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FFDE00" },
                    { offset: 0.5, color: "#00ECD9" },
                    { offset: 1, color: "#00ECD9" }
                  ])*/
                }
              },
              {
                name: '启用',
                value: 1, // 右侧部分
                itemStyle: {
                  normal: {
                    color: '#68CD9F'
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    getData(data) {
      this.option.series[0].data[0].value = data.enableCount + data.disableCount
      this.option.series[0].data[1].value = data.disableCount
      this.option.series[0].data[2].value = data.enableCount
    }
  }
}
</script>

<style scoped>

</style>
